<template>
    <div class="usertableManger">
        <div class="userSheach">
            <div class="item">
                <span>审批状态:</span>
                <n-select class="selectItem" v-model:value="parmas.applyState" :options="optionSelect"
                    placeholder="请选择状态" />
            </div>
            <div class="itemBtn">
                <n-button attr-type="button"  type="info" @click="queryBtn">查询</n-button>
                <n-button attr-type="button" @click="resetVaalue" >重置</n-button>
            </div>
        </div>
        <div class="usertable">
            <div class="usertableAllBtn">
                <n-button type="info" class="addBtn" @click="addUser">申请审批</n-button>
            </div>
            <n-data-table :columns="columns" :data="tableData" :max-height="250" :row-key="row => row._id"
                 />
            <div class="userPagination">
                <span></span>
                <n-pagination :item-count="pagination.total" :on-update:page="updatePage"
                    :on-update:page-size="updateSize" :page-sizes="[2, 5, 15, 40]" show-size-picker />
            </div>
        </div>
        <addApplyVue ref="addApplyRef" @getLeaveList="getLeaveList" />
        <showmadolVue ref ='showMadol'/>
    </div>
</template>
<script lang="ts">

import { defineComponent, ref, reactive, toRefs, watchEffect, h, onBeforeMount } from 'vue'
import { NButton ,useMessage} from 'naive-ui'
import { leaveList,leaves0perate } from '../../../api/leaves'
import addApplyVue from './component/addApply.vue'
import showmadolVue from './component/showmadol.vue'

const message = useMessage()
export default defineComponent({
    components: {
        addApplyVue,
        showmadolVue
    },
    setup() {
        const columns = [
            // {
            //     type: 'selection',
            //     // disabled(row, index) {
            //     //     return row.name === 'Edward King 3'
            //     // }
            // },
            {
                title: '单号',
                key: 'orderNo'
            },
            {
                title: '休假时间',
                key: 'DateProcess'
            },
            {
                title: '休假时长',
                key: 'leaveTime',
               
            },
            {
                title: '休假类型',
                key: 'applyType',
                   render: (row) => (
                    row.applyType == 1 ? '事假' : row.applyType == 2 ? '调休' : row.applyType == 3 ? '年假' : '年假'
                )
            },
            {
                title: '休假原因',
                key: 'reasons'
            },
            {
                title: '申请时间',
                key: 'createTime',
                // render: (row) =>(
                //   row.createTime.split('T')[0]
                // )
            },
            {
                title: '审批人',
                key: 'auditUsers',
            },
            {
                title: '当前审批人',
                key: 'curAuditUserName'
            },
             {
                title: '审批状态',
                key: 'applyState',
                 render: (row) => (
                    row.applyState == 1 ? '待审批' : row.applyState == 2 ? '审批中' : row.applyState == 3 ? '审批拒绝' : row.applyState == 4 ? '审批通过' :row.applyState == 5 ?'作废': '其他'

                )
            },
            {
                title: '操作',
                key: 'actions',
                width:"150px",
                render(row) {
                    return h(
                        'div',
                        {},
                        [
                            h(
                                NButton,
                                {
                                    size: 'small',
                                    type: "info",
                                    onClick: () => methods.showLeave(row)
                                },
                                {
                                    default: () => '查看'
                                }
                            ),
                            h(
                                NButton,
                                {
                                    size: 'small',
                                    type: "error",
                                    class: 'delteBtn',
                                    onClick: () => methods.userOneDelete(row)
                                },
                                {
                                    default: () => '删除'
                                }
                            )
                        ]
                    )
                }
            }
        ]
    
        const parameter = reactive({
            parmas: {
                pageNum: 1,
                pageSize: 10,
                applyState: null
            },
            pagination: {
                total: 10,
            },
            tableData: [],
            optionSelect: [
                {
                    label: '全部',
                    value: ""
                }, {
                    label: '待审批',
                    value: 1
                },
                {
                    label: '审批中',
                    value: 2
                },
                {
                    label: '审批拒绝',
                    value: 3
                },
                 {
                    label: '审批通过',
                    value: 4
                },
                 {
                    label: '作废',
                    value: 5
                },
            ],
        })
    
        onBeforeMount(() => {
            methods.pageList(parameter.parmas)
        })
        const addApplyRef =ref(null)
        const showMadol =ref(null)
        const methods = reactive({
            //初始化
            pageList: (item) => {
                leaveList(item).then(res => {
                    parameter.pagination.total = res.page.total
                    parameter.tableData = res.data
                })
            },
           
           //分页
            updatePage(e) {
                parameter.parmas.pageNum = e
                methods.pageList(parameter.parmas)
            },
            updateSize(e) {
                console.log(e)
                parameter.parmas.pageSize = e
                methods.pageList(parameter.parmas)
            },
            //申请审批
            addUser() {
                addApplyRef.value.createDepart('')
            },
            getLeaveList(){
                 methods.pageList(parameter.parmas)
            },
            // 查看
            showLeave(item){
               showMadol.value.showModalfun(item)
            },
             //  删除
            userOneDelete(item) {
               leaves0perate({_id:item._id,action:'del'}).then(res=>{
                methods.pageList(parameter.parmas)
                message.success('操作成功')
               })
            },
            //查询
            queryBtn(){
                methods.pageList(parameter.parmas)
            },
            // 重置
            resetVaalue(){
                parameter.parmas.applyState=null
            },
        })

        return {
            columns,
            addApplyRef,
            showMadol,
            ...toRefs(methods),
            ...toRefs(parameter),
        }
    }



})
</script>

<style lang="scss">
.usertableManger {
    height: 100%;
    padding: 10px;
    // background: rgb(224, 220, 220);

    .usertable {
        height: 100%;
        padding: 10px;
        background: #fff;

        .usertableAllBtn {
            padding: 5px;
            display: flex;

            .addBtn {
                margin-right: 10px;
            }
        }

        .delteBtn {
            margin: 0 5px;
        }

        .userPagination {
            display: flex;
            justify-content: space-between;
            padding: 10px;
        }

    }

    .userSheach {
        background: #fff;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        font-size: 17px;
        padding: 20px 0;
        .itemBtn{
            display: flex;
            .n-button{
                margin: auto 5px;
            }
        }
        .item {
            display: flex;
            align-items: center;
            margin: 0 10px;

            .selectItem {
                width: 150px;
            }

            span {
                white-space: nowrap;
                display: inline-block;
                padding-right: 12px;
            }
        }

    }
}
</style>